<template>
  <!-- 广告管理 -->
  <div class="user-add-or-update">
    <el-drawer :title="this.rowData ? '编辑广告' : '新增广告'" :visible.sync="drawer" custom-class="demo-drawer" direction="rtl" size="60%">
      <div class="demo-drawer__content">
        <div :style="cardHeightStyle" class="rightScrollNone">
          <el-form size="mini" :model="dataForm" :rules="rules" ref="vendorRuleForm">
            <el-row>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="标题" prop="title">
                  <el-input autocomplete="off" type="text" v-model="dataForm.title"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="广告位置" prop="position">
                  <el-select v-model="dataForm.position" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in position" :key="index" :label="item.key" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="所属小程序" prop="project__name">
                  <el-select v-model="dataForm.project__name" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in project" :key="index" :label="item.key" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="图片" prop="img">
                  <!-- 上传图片 -->
                  <el-upload action="#" class="avatar-uploader" :show-file-list="false" accept="#" :before-upload="beforeUpload1">
                    <img v-if="dataForm.img" :src="'https://images.weserv.nl/?url=' + dataForm.img" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <!-- 上传图片结束 -->
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="跳转方式" prop="method">
                  <el-select v-model="dataForm.method" placeholder="请选择" style="width: 100%" @change="toURL(dataForm.method)">
                    <el-option v-for="(item, index) in jump" :key="index" :label="item.key" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="dataForm.method == 3">
                <el-form-item :label-width="formLabelWidth" label="链接地址" prop="url">
                  <el-input autocomplete="off" type="text" v-model="dataForm.url"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="dataForm.method == 4">
                <el-form-item :label-width="formLabelWidth" label="小程序AppID" prop="jump_app_id">
                  <el-input autocomplete="off" type="text" v-model="dataForm.jump_app_id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="dataForm.method == 2 || dataForm.method == 4">
                <el-form-item :label-width="formLabelWidth" label="小程序页面路径" prop="jump_app_url">
                  <el-input autocomplete="off" type="text" v-model="dataForm.jump_app_url" placeholder="如：page/index"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="排序值" prop="sort">
                  <el-input autocomplete="off" type="text" v-model="dataForm.sort" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="是否启用" prop="status">
                  <el-radio-group v-model="dataForm.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">停用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button size="mini" @click="cancelForm">取 消</el-button>
          <el-button size="mini" :loading="loading" @click="dataFormSubmit" type="primary">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { noticebase, uploadImgApi, adAdd, adEdit } from '@/api/wxapplet/index.js'

export default {
  data() {
    return {
      isshow: 0,
      // isshow0:false,
      // isshow1:false,
      // isshow2:false,

      timeOutCount: 0,
      showNumInput: false,
      refNum: 0,
      dataForm: {
        id: '',
        title: '',
        position: '',
        project_id: '',
        project__name: '',
        img: '',
        method: '',
        url: '',
        jump_app_id: '',
        jump_app_url: '',
        sort: '',
        status: '',
      },
      position: [], //广告位置
      project: [], //所属小程序
      jump: [], //跳转方式
      rowData: null,

      formLabelWidth: '150px',
      loading: false,
      drawer: false,
      roleOptions: [],
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        position: [{ required: true, message: '广告位置不能为空', trigger: 'blur' }],
        project__name: [{ required: true, message: '所属小程序不能为空', trigger: 'blur' }],
        img: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        method: [{ required: true, message: '跳转方式不能为空', trigger: 'blur' }],
        url: [{ required: true, message: '链接地址不能为空', trigger: 'blur' }],
        jump_app_id: [{ required: true, message: '小程序AppID不能为空', trigger: 'blur' }],
        jump_app_url: [{ required: true, message: '小程序页面路径不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '是否启用不能为空', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    noticebase({}).then((res) => {
      // 所属小程序
      this.project = res.data.project
      // 广告位置
      this.position = res.data.position
      this.jump = res.data.jump
    })
  },
  computed: {
    cardHeightStyle() {
      let documentClientHeight = document.body.clientHeight
      const height = documentClientHeight - 80 - 80
      return {
        height: height + 'px',
        'overflow-y': 'scroll',
        'padding-right': '20px;',
      }
    },
  },
  methods: {
    // 跳转方式校验
    toURL(val) {
      this.dataForm.method = val
    },

    // 编辑
    Edit(params) {
      return adEdit(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          }
        })
        .catch((res) => {
          this.$message.error('保存失败')
        })
    },
    // 新增
    Add(params) {
      return adAdd(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          }
        })
        .catch((res) => {
          this.$message.error('保存失败')
        })
    },
    //   提交
    dataFormSubmit() {
      this.$refs.vendorRuleForm.validate((flag) => {
        if (flag) {
          const data = this.dataForm

          if (this.rowData != null) {
            data.project_id = data.project__name == this.rowData.project__name ? this.rowData.project_id : data.project__name
          } else {
            data.project_id = data.project__name
          }

          const info = Object.assign(data)
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }

          var request = this.rowData ? this.Edit(formData) : this.Add(formData)

          request
            .then((d) => {
              this.cancelForm()
              this.$emit('refreshList')
            })
            .catch((d) => {
              this.cancelForm()
            })
        }
      })
    },
    //   关闭弹出层
    cancelForm() {
      this.cleanInfo()
      this.loading = false
      this.drawer = false
    },
    //   打开弹出层
    open(row, role) {
      if (this.drawer) {
        return
      }
      this.rowData = row || null
      this.drawer = true
      this.openHook()
      // this.getshcoolselect()
    },
    clearData() {
      this.$refs.vendorRuleForm.resetFields()
    },
    cleanInfo() {
      clearTimeout(this.timeOutCount)
    },
    //   回显
    openHook() {
      this.$nextTick((a) => {
        this.showNumInput = false
        this.refNum = 60 * 5 + 1
        this.clearData(this.rowData)
        console.log()
        if (this.rowData) {
          // 修改
          for (let key in this.dataForm) {
            console.log(this.rowData)
            this.dataForm[key] = this.rowData[key]
          }
        } else {
          this.loading = false
        }
      })
    },
    //   上传

    //   上传logo
    beforeUpload1(file) {
      const info = Object.assign({ file: file })
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      uploadImgApi(formData)
        .then((res) => {
          console.log(res)
          this.dataForm.img = res.data.url
        })
        .catch((e) => {
          this.dataForm.logo = ''
        })
    },
  },
}
</script>
<style lang="scss">
.user-add-or-update {
  .el-tag {
    position: relative;
    right: 5px;
    z-index: 1;
    height: 40px;
    line-height: 40px;
    border-radius: 0 5px 5px 0;
    padding-left: 15px;
  }

  .my-email {
    .el-input__inner {
      border-radius: 5px 0 0 5px;
    }
  }
}

/*

  */

.fileInput {
  padding-right: 0;
}
</style>
